<template>
<el-dialog title="合并客户" :visible.sync="visible" append-to-body width="50%">
    <el-form :model="ruleForm" ref="ruleFormRef" :rules="rules" :inline="true">
        <el-form-item>
            <el-input v-model="ruleForm.keywords" placeholder="请输入完整的联系方式"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="doSearch">搜索</el-button>
        </el-form-item>
    </el-form>

    <div class="product-group">

        <el-radio-group v-model="ruleForm.product_member_id" class="w100">
            <el-row class="header" :gutter="8">
                <el-col :span="12">
                    <el-radio :label="ruleForm.member_id">当前</el-radio>
                </el-col>
                <el-col :span="12">
                    <el-radio :label="rsMemberId">搜索结果</el-radio>
                </el-col>
            </el-row>
        </el-radio-group>

        <el-row :gutter="80">
            <el-col :span="12">
                <template v-for="(product,key) in products">
                    <el-descriptions :key="key" class="margin-top" :column="1" border>
                        <template slot="title">
                            <span>{{product.category.title}}</span>
                        </template>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-user"></i>
                                创建人
                            </template>
                            {{product.creator.realname}}
                            <el-tag type="danger" v-if="product.creator.status==0">已离职</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-time"></i>
                                创建时间
                            </template>
                            {{product.create_time}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-dish"></i>
                                餐标
                            </template>
                            {{product.table_price_1}}万 - {{product.table_price_2}}万
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-wallet"></i>
                                
                            </template>
                            {{product.table_amount}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-date"></i>
                                预产期
                            </template>
                            {{product.event_date}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-tickets"></i>
                                城市
                            </template>
                            <el-tag type="danger" size="small">{{product.city.shortname}}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-office-building"></i>
                                区域
                            </template>
                            <el-tag v-for="(item,index) of product.zone" :key="index" size="small" style="margin-right:5px">{{item.shortname}}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-school"></i>
                                意向酒店
                            </template>
                            <el-tag v-for="(item,index) of product.store" :key="index" size="small" style="margin-right:5px">{{item.title}}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-chat-square"></i>
                                备注
                            </template>
                            {{product.remark}}
                        </el-descriptions-item>
                    </el-descriptions>
                </template>
            </el-col>
            <el-col :span="12">
                <template v-for="(product,key) in rsProducts">
                    <el-descriptions :key="key" class="margin-top" :column="1" border>
                        <template slot="title">
                            <span>{{product.category.title}}</span>
                        </template>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-user"></i>
                                创建人
                            </template>
                            {{product.creator.realname}}
                            <el-tag type="danger" v-if="product.creator.status==0">已离职</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-time"></i>
                                创建时间
                            </template>
                            {{product.create_time}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-dish"></i>
                                餐标
                            </template>
                            {{product.table_price_1}}万 - {{product.table_price_2}}万
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-wallet"></i>
                                
                            </template>
                            {{product.table_amount}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-date"></i>
                                预产期
                            </template>
                            {{product.event_date}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-tickets"></i>
                                城市
                            </template>
                            <el-tag type="danger" size="small">{{product.city.shortname}}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-office-building"></i>
                                区域
                            </template>
                            <el-tag v-for="(item,index) of product.zone" :key="index" size="small" style="margin-right:5px">{{item.shortname}}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-school"></i>
                                意向酒店
                            </template>
                            <el-tag v-for="(item,index) of product.store" :key="index" size="small" style="margin-right:5px">{{item.title}}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-chat-square"></i>
                                备注
                            </template>
                            {{product.remark}}
                        </el-descriptions-item>
                    </el-descriptions>
                </template>
            </el-col>
        </el-row>
    </div>

    <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
    </div>
</el-dialog>
</template>

<script>
import {
    getMemberByContactApi,
    doCombineApi
} from '@/api/customer/member.js'
const ruleForm = {
    member_id: "",
    keywords: "",
    product_member_id: 0,
};

export default {
    data() {
        return {
            visible: false,
            ruleForm: Object.assign({}, ruleForm),
            products: [],
            rsProducts: [],
            rsMemberId: "",
            rules: {
                keywords: [{
                    required: true,
                    message: "请填写完整的联系方式",
                    trigger: "blur",
                }],
            },
        }
    },
    methods: {
        showDialog(products, member_id) {
            this.visible = true;
            this.ruleForm = Object.assign({}, ruleForm);
            this.ruleForm.member_id = member_id;
            this.products = products;
            this.rsProducts = [];
        },
        closeDialog() {
            this.visible = false;
            this.ruleForm = Object.assign({}, ruleForm);
            this.rsProducts = [];
        },
        doSearch() {
            this.$refs['ruleFormRef'].validate((valid) => {
                if (!valid) {
                    return false;
                }

                getMemberByContactApi(this.ruleForm).then(res => {
                    if (res.code == '200') {
                        this.rsProducts = res.data.products;
                        this.rsMemberId = res.data.member_id;
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            })
        },
        submit() {
            if (this.ruleForm.keywords == '') {
                this.$message.error("搜索的联系方式不能为空");
                return false;
            }

            if (this.ruleForm.product_member_id == 0) {
                this.$message.error("请选择要保留的意向产品");
                return false;
            }

            this.$confirm('确认合并？', '确认提交', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                doCombineApi(this.ruleForm).then(res => {
                    if (res.code == '200') {
                        this.$emit("refreshMember", this.ruleForm.member_id);
                        this.$message.success(res.msg);
                        this.closeDialog();
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            }).catch(() => {
                this.$message.info('取消提交');
            });

        }
    }
}
</script>

<style lang="scss" scoped>
.product-group {
    border-bottom: 1px solid #dedede;
    padding: 0 0 10px;

    .w100 {
        width: 100%;
    }

    .header {
        background: #ecedf1;
        color: #000;
        padding: 8px 0;
        margin-bottom: 10px;
    }

    .el-row {
        .el-col:nth-child(even) {
            border-left: 1px solid #ecedf1;
        }

    }
}
</style>
